<template>
  <div>
    <div class="headertitle1">
      <h2 class="h2-Title">节日列表:</h2>
    </div>
    <div class="headertitle2" v-show="this.islogin">
      <el-button type="primary" v-show="this.isAdmin" @click="goManage()" round class="revertbtn">管理</el-button>
      <el-button type="primary" @click="signOut()" round class="revertbtn">退出</el-button>
    </div>
    <el-card :body-style="{ padding: '0px' }">
      <div class="carditem">
        <div class="item" :key="index" v-for="(item, index) in this.$store.state.festivalListDatas"
          @click="Change(item.id)">
          <img :src="item.homePicture" class="image" />
          <div>
            <h5 class="title1">节日名称：</h5>
            <img class="zitiImg" :src="item.namePicture" />
          </div>
          <div class="time">
            <span>过节时间：</span>
            <time class="holidaytime">{{ item.holiday }}</time>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: [],
  data() {
    return {
      islogin: false,
      isAdmin: false,
      viewname: "FestivalContent",
    };
  },
  created() {
    this.ChangeIsLoginAndAdmin();
    this.GetFestivalData();
  },
  methods: {
    Change(id) {
      this.$store.commit("Change", { id: id, name: this.viewname });
    },
    ChangeIsLoginAndAdmin() {
      if (this.$store.state.userinfo !== "") {
        this.islogin = true;
      } else {
        this.islogin = false;
      }
      if (this.$store.state.userinfo === "admin") {
        this.isAdmin = true;
      } else {
        this.isAdmin = false;
      }
    },
    signOut(id) {
      this.$store.commit("SaveUserInfo", "");
      this.$store.commit("Change", { id: id, name: "Login" });
    },
    goManage(id) {
      this.$store.commit("Change", { id: id, name: "FestivalManage" });
    },
    GetFestivalData() {
      this.$api.GetFestivalList().then((res) => {
        if (res.data.status === 200) {
          this.$store.state.festivalListDatas = res.data.data.map((item) => {
            return {
              id: item.id,
              name: item.name,
              holiday: item.holiday,
              namePicture: `${item.namePicture}`,
              homePicture: `${item.homePicture}`,
              titleDesc: item.titleDesc,
              titlePicture: `${item.titlePicture}`,
              originDesc: item.originDesc,
              originPicture: `${item.originPicture}`,
              legendDesc: item.legendDesc,
              legendPicture: `${item.legendPicture}`
            };
          });
        } else {
          this.$message({
            message: `获取数据失败,${res.data.msg}`,
            type: "error",
          });
          return false;
        }
      });
    }
  },
};
</script>

<style scoped>
.headertitle1 {
  display: inline-block;
}

.headertitle2 {
  padding-top: 10px;
  float: right;
}

.h2-Title {
  padding-top: 20px;
  font-size: 23px;
  padding-bottom: 5px;
}

.el-card.is-always-shadow {
  border: 0px;
  box-shadow: 0 0 0 0;
  background-color: rgb(254, 246, 231);
}

.carditem {
  margin: 0px;
  display: flex;
  width: 100%;
  height: 100%;
  flex-flow: row wrap;
  align-content: flex-start;
}

.item {
  padding: 10px;
  flex: 0 0 32.43%;
  margin: 10px 5px;
  box-sizing: border-box;
  border-radius: 8px;
  display: flex;
  flex-flow: row wrap;
  transition: all 0.5s;
  border: 1px solid #ffe0b4;
}

.item:hover {
  transition: all 0.5s;
  cursor: pointer;
  border: 1px solid #e11057;
}

.image {
  width: 150px;
  height: 150px;
  border-radius: 5px;
}

img {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 0.6s;
}

img:hover {
  transform: scale(1.2);
}

.title1 {
  width: 90px;
  height: 30px;
  font-size: 17px;
  font-weight: bold;
  margin: 0px;
  padding-left: 20px;
  padding-top: 20px;
}

.zitiImg {
  width: 100px;
  height: 50px;
  font-size: 17px;
  font-weight: bold;
  margin: 0px;
  padding-left: 60px;
  padding-top: 20px;
}

.time {
  padding: 20px;
  font-size: 15px;
  font-weight: bold;
  padding-left: 60px;
}

.holidaytime {
  color: red;
}

.item:hover {
  box-sizing: border-box;
  box-shadow: 0px 2px 10px 3px rgba(179, 177, 177, 0.5);
}

.revertbtn {
  width: 100px;
  font-weight: bold;
  color: #e11057;
  transition: all 0.5s;
  background-color: #fef6e7;
  border: 1px solid #e11057;
}

.revertbtn:hover {
  transition: all 0.5s;
  background-color: #e11057;
  border: 1px solid #e11057;
}

.revertbtn:focus {
  transition: all 0.5s;
  background-color: #e11057;
  border: 1px solid #e11057;
}
</style>